<template>
  <div class="menuBox">
    <el-menu
        class="el-menu-vertical-demo menu"
        @select="select"
        :default-active="props.titleList[0]"
    >
      <el-menu-item
          v-for="(item,index) in props.titleList"
          :key="index"
          :index="item"
      >
        {{item}}
      </el-menu-item>
    </el-menu>
    <div class="menuBtn" @click="isShow = !isShow">
      <span class="ico">《</span>
    </div>
  </div>
</template>

<script setup>
  import {defineProps,defineEmits,ref,computed,onBeforeMount} from "vue"

  //接收参数
  const props = defineProps(["titleList"])
  const emits = defineEmits(["selectBook"])

  //是否展开
  let isShow = ref(true)

  //控制宽度
  let width = computed(()=>{
    return isShow.value ? "200px" : "0px"
  })

  //控制图标旋转
  let rotate = computed(()=>{
    return isShow.value ? "rotate(0deg)" : "rotate(180deg)"
  })

  //根据窗口大小判断是否显示
  function judgmentWindow(){
    isShow.value = window.innerWidth > 1024
  }

  //菜单切换回调
  function select(index){
    emits("selectBook",index)
  }

  //组件挂载前
  onBeforeMount(()=>{
    judgmentWindow()
  })

</script>

<style scoped>
  .menuBox{
    width: v-bind(width);
    border-right: 2px solid #cccccc;
    position: relative;
    transition: width .5s;
    user-select: none;
  }
  .menu{
    background-color: var(--el-bg-color);
    border: none;
    height: 100%;
    overflow-y: auto;
  }
  .menu::-webkit-scrollbar{
    display: none;
  }
  .menuBtn{
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translate(-2px,-50%);
    background-color: var(--el-bg-color);
    width: 50px;
    height: 50px;
    border: 2px solid #cccccc;
    border-left-color: transparent;
    border-radius: 0 50% 50% 0;
    cursor: pointer;
  }
  .menuBtn .ico{
    width: 25px;
    height: 25px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) v-bind(rotate);
  }
</style>